﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加手机号 - 模切之家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* TDesign 工业品色彩系统 */
            --primary-color: #d54941;
            --primary-light: #e37318;
            --primary-dark: #b73e3a;
            --secondary-color: #f2f3ff;
            --accent-color: #e37318;
            --success-color: #00a870;
            --warning-color: #ed7b2f;
            --error-color: #d54941;
            
            /* 背景色系 */
            --bg-color-page: #ffffff;
            --bg-color-container: #ffffff;
            --bg-color-secondray: #f8f9fc;
            
            /* 边框和分割线 */
            --border-color: #e7e7e7;
            --border-color-light: #f0f0f0;
            --border-radius-small: 3px;
            --border-radius-medium: 6px;
            --border-radius-large: 9px;
            
            /* 文字色彩 */
            --text-primary: #1a1a1a;
            --text-secondary: #4e5969;
            --text-placeholder: #86909c;
            --text-disabled: #c9cdd4;
            
            /* 阴影系统 */
            --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-2: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
            --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
            
            /* 间距系统 */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: var(--bg-color-page);
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: var(--bg-color-container);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        /* 状态栏 */
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-2) var(--space-4);
            font-size: 12px;
            color: var(--text-primary);
            background: var(--bg-color-container);
        }
        
        .status-left {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        
        .status-right {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        
        /* 导航栏 */
        .navbar {
            display: flex;
            align-items: center;
            padding: var(--space-4);
            border-bottom: 1px solid var(--border-color-light);
        }
        
        .back-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--text-primary);
            cursor: pointer;
            margin-right: var(--space-3);
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        /* 主要内容区域 */
        .main-content {
            padding: var(--space-6) var(--space-4);
        }
        
        /* 输入表单 */
        .form-section {
            margin-bottom: var(--space-6);
        }
        
        .form-item {
            display: flex;
            align-items: center;
            padding: var(--space-4) 0;
            border-bottom: 1px solid var(--border-color-light);
        }
        
        .form-item:last-child {
            border-bottom: none;
        }
        
        .form-label {
            min-width: 80px;
            font-size: 14px;
            color: var(--text-primary);
            flex-shrink: 0;
        }
        
        .form-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .form-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            color: var(--text-primary);
            background: transparent;
        }
        
        .form-input::placeholder {
            color: var(--text-placeholder);
        }
        
        .form-arrow {
            color: var(--text-placeholder);
            font-size: 12px;
            margin-left: var(--space-2);
        }
        
        .country-code {
            color: var(--text-primary);
            font-size: 14px;
            margin-right: var(--space-2);
        }
        
        /* 验证码按钮 */
        .verification-btn {
            background: var(--bg-color-secondray);
            color: var(--text-secondary);
            border: 1px solid var(--border-color-light);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--border-radius-small);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        
        .verification-btn:hover {
            background: var(--border-color-light);
        }
        
        .verification-btn:disabled {
            background: var(--text-disabled);
            color: var(--text-placeholder);
            cursor: not-allowed;
        }
        
        .verification-btn.countdown {
            background: var(--text-disabled);
            color: var(--text-placeholder);
        }
        
        /* 保存手机号选项 */
        .save-option {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            margin-bottom: var(--space-8);
        }
        
        .save-checkbox {
            width: 16px;
            height: 16px;
            border: 1px solid var(--border-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            margin-top: 2px;
        }
        
        .save-checkbox.checked {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .save-checkbox.checked::after {
            content: '';
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
        }
        
        .save-text {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        
        /* 确认按钮 */
        .confirm-button {
            width: 100%;
            height: 48px;
            background: var(--text-disabled);
            color: var(--text-placeholder);
            border: none;
            border-radius: var(--border-radius-medium);
            font-size: 16px;
            font-weight: 500;
            cursor: not-allowed;
            transition: all 0.2s ease;
        }
        
        .confirm-button.active {
            background: var(--primary-color);
            color: white;
            cursor: pointer;
        }
        
        .confirm-button.active:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
            box-shadow: var(--shadow-2);
        }
        
        .confirm-button.active:active {
            transform: translateY(0);
            box-shadow: var(--shadow-1);
        }
        
        /* 响应式设计 */
        @media (max-width: 375px) {
            .main-content {
                padding: var(--space-4) var(--space-3);
            }
            
            .form-label {
                min-width: 70px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-left">
                <span>21:04</span>
                <i class="fas fa-eye"></i>
                <span>N</span>
                <span>Q</span>
            </div>
            <div class="status-right">
                <i class="fas fa-bluetooth"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-signal"></i>
                <i class="fas fa-battery-three-quarters"></i>
                <span>91</span>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="navbar">
            <div class="back-btn" onclick="goBack()">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="navbar-title">添加手机号</div>
        </div>
        
        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 国家/地区选择 -->
            <div class="form-section">
                <div class="form-item" onclick="selectCountry()">
                    <div class="form-label">国家/地区</div>
                    <div class="form-content">
                        <span id="selectedCountry">中国大陆</span>
                        <i class="fas fa-chevron-right form-arrow"></i>
                    </div>
                </div>
            </div>
            
            <!-- 手机号输入 -->
            <div class="form-section">
                <div class="form-item">
                    <div class="form-label">手机号</div>
                    <div class="form-content">
                        <span class="country-code">+86</span>
                        <input type="tel" class="form-input" placeholder="填写手机号" id="phoneInput" maxlength="11">
                    </div>
                </div>
            </div>
            
            <!-- 验证码输入 -->
            <div class="form-section">
                <div class="form-item">
                    <div class="form-label">验证码</div>
                    <div class="form-content">
                        <input type="text" class="form-input" placeholder="填写验证码" id="codeInput" maxlength="6">
                        <button class="verification-btn" id="verificationBtn" onclick="sendVerificationCode()">
                            获取验证码
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 保存手机号选项 -->
            <div class="save-option">
                <div class="save-checkbox" id="saveCheckbox" onclick="toggleSaveOption()"></div>
                <div class="save-text">保存手机号，下次使用无需再次添加</div>
            </div>
            
            <!-- 确认按钮 -->
            <button class="confirm-button" id="confirmBtn" onclick="confirmVerification()">
                确定
            </button>
        </div>
    </div>
    
    <script>
        let selectedCountry = '中国大陆';
        let countryCode = '+86';
        let savePhone = false;
        let countdownTimer = null;
        let countdownSeconds = 0;
        
        // 返回上一页
        function goBack() {
            window.history.back();
        }
        
        // 选择国家/地区
        function selectCountry() {
            const countries = [
                { name: '中国大陆', code: '+86' },
                { name: '中国香港', code: '+852' },
                { name: '中国台湾', code: '+886' },
                { name: '美国', code: '+1' },
                { name: '日本', code: '+81' },
                { name: '韩国', code: '+82' }
            ];
            
            const countryList = countries.map(country => 
                `${country.name} (${country.code})`
            ).join('\n');
            
            const choice = prompt(`请选择国家/地区：\n\n${countryList}\n\n请输入序号(1-${countries.length}):`);
            const index = parseInt(choice) - 1;
            
            if (index >= 0 && index < countries.length) {
                selectedCountry = countries[index].name;
                countryCode = countries[index].code;
                document.getElementById('selectedCountry').textContent = selectedCountry;
            }
        }
        
        // 发送验证码
        function sendVerificationCode() {
            const phoneInput = document.getElementById('phoneInput');
            const phone = phoneInput.value.trim();
            
            if (!phone) {
                alert('请先输入手机号');
                phoneInput.focus();
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入正确的手机号格式');
                phoneInput.focus();
                return;
            }
            
            // 模拟发送验证码
            const verificationBtn = document.getElementById('verificationBtn');
            verificationBtn.disabled = true;
            verificationBtn.classList.add('countdown');
            countdownSeconds = 60;
            
            // 开始倒计时
            countdownTimer = setInterval(() => {
                countdownSeconds--;
                verificationBtn.textContent = `${countdownSeconds}秒后重发`;
                
                if (countdownSeconds <= 0) {
                    clearInterval(countdownTimer);
                    verificationBtn.disabled = false;
                    verificationBtn.classList.remove('countdown');
                    verificationBtn.textContent = '获取验证码';
                }
            }, 1000);
            
            // 模拟验证码发送成功
            alert(`验证码已发送到 ${countryCode} ${phone}\n\n验证码：123456（演示用）`);
        }
        
        // 切换保存手机号选项
        function toggleSaveOption() {
            savePhone = !savePhone;
            const checkbox = document.getElementById('saveCheckbox');
            
            if (savePhone) {
                checkbox.classList.add('checked');
            } else {
                checkbox.classList.remove('checked');
            }
        }
        
        // 确认验证
        function confirmVerification() {
            const phoneInput = document.getElementById('phoneInput');
            const codeInput = document.getElementById('codeInput');
            const phone = phoneInput.value.trim();
            const code = codeInput.value.trim();
            
            if (!phone) {
                alert('请输入手机号');
                phoneInput.focus();
                return;
            }
            
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入正确的手机号格式');
                phoneInput.focus();
                return;
            }
            
            if (!code) {
                alert('请输入验证码');
                codeInput.focus();
                return;
            }
            
            if (code !== '123456') {
                alert('验证码错误，请重新输入');
                codeInput.focus();
                return;
            }
            
            // 验证成功
            if (savePhone) {
                localStorage.setItem('savedPhone', phone);
                localStorage.setItem('savedCountry', selectedCountry);
                localStorage.setItem('savedCountryCode', countryCode);
            }
            
            // 设置登录状态
            localStorage.setItem('isLoggedIn', 'true');
            localStorage.setItem('userPhone', phone);
            localStorage.setItem('userCountry', selectedCountry);
            localStorage.setItem('userCountryCode', countryCode);
            
            alert('验证成功！正在登录...');
            
            // 跳转到主页
            setTimeout(() => {
                window.location.href = 'home.html';
            }, 1000);
        }
        
        // 输入验证
        function validateInputs() {
            const phoneInput = document.getElementById('phoneInput');
            const codeInput = document.getElementById('codeInput');
            const confirmBtn = document.getElementById('confirmBtn');
            
            const phone = phoneInput.value.trim();
            const code = codeInput.value.trim();
            
            const isValidPhone = /^1[3-9]\d{9}$/.test(phone);
            const isValidCode = /^\d{6}$/.test(code);
            
            if (isValidPhone && isValidCode) {
                confirmBtn.classList.add('active');
                confirmBtn.disabled = false;
            } else {
                confirmBtn.classList.remove('active');
                confirmBtn.disabled = true;
            }
        }
        
        // 页面加载时检查已保存的手机号
        document.addEventListener('DOMContentLoaded', function() {
            const savedPhone = localStorage.getItem('savedPhone');
            if (savedPhone) {
                document.getElementById('phoneInput').value = savedPhone;
                const savedCountry = localStorage.getItem('savedCountry');
                const savedCountryCode = localStorage.getItem('savedCountryCode');
                if (savedCountry) {
                    selectedCountry = savedCountry;
                    countryCode = savedCountryCode;
                    document.getElementById('selectedCountry').textContent = selectedCountry;
                }
            }
            
            // 添加输入监听
            document.getElementById('phoneInput').addEventListener('input', validateInputs);
            document.getElementById('codeInput').addEventListener('input', validateInputs);
        });
    </script>
</body>
</html>

